<template>
    <div class="bandContainer">
        <div class="img_band" >
            <img src="/static/images/user.png">
            <span>通知栏</span>
            <p></p>
            <p class="content">您今天还有100场考试哦，请您尽快完成！</p>
        </div>
        <div class="line"></div>

       <div class="img-btn1">
        <img class = "img" src='/static/images/3.png' >
        <button class="band-btn" @click="toPractiseList">课堂练习</button>
       </div>
        <div class="img-btn2">
            <img class = "img1" src='/static/images/3.png' >
            <button class="band2-btn" @click="toExam">人机考试</button>
        </div>

    </div>

</template>

<script>
  export default {
    data () {
      return {
      }
    },
    beforeMount () {
    },
    methods: {
      toExam () {
        wx.navigateTo({url: '../list/main'})
      },
      toPractiseList () {
        wx.navigateTo({url: '../practiseList/main'})
      }
    }
  }
</script>

<style>
    .bandContainer{
      display: flex;
      flex-direction: column;
  }
  .img_band{
      vertical-align: middle;
      background-color: #fffeff;
  }
    .img_band img{
      padding: 5px;
      width: 32px;
      height: 32px;
  }
    .img_band span{
      padding: 10px;
      font-size: 22px;

  }
    .content{
      padding: 5px;
      font-size: 18px;
      font-family: \5FAE\8F6F\96C5\9ED;
      text-align: center;
  }
    .line{
        width: 100%;
        height: 2px;
         margin-top: 20px;
        background-color: #fffeff;
      box-shadow: 0 8px 20px 0 rgba(0,0,0,0.53),0 6px 20px 0 rgba(0,0,0,0.53);
    }
    .band-btn {
        background-color: #eea9bb !important;
        border:2PX solid #eea9bb !important;
        border-radius: 20px !important;
        margin-left: 150px;
        margin-top: 55px;
        width:55%;
        height: 125px !important;
        padding-top: 30px !important;
        vertical-align:middle !important;
        text-align: center !important;
        font-size: 20px;
        color: white;
        line-height: 50px !important;
        font-weight: bold !important;
      box-shadow: 0 8px 20px 0 rgba(0,0,0,0.53),0 6px 20px 0 rgba(0,0,0,0.53);
    }
    .band2-btn {
        background-color: #7aa7ba !important;
        border: 2PX solid #7aa7ba !important;
        border-radius: 20px !important;
        margin-left: 150px;
        margin-top: 130px;
        width:55%;
        height: 125px !important;
        padding-top: 30px !important;
        vertical-align:middle !important;
        text-align: center !important;
        line-height: 50px !important;
        color: white;
        font-size: 20px;
        font-weight: bold !important;
      box-shadow: 0 8px 20px 0 rgba(0,0,0,0.53),0 6px 20px 0 rgba(0,0,0,0.53);
    }
    .img{
        width: 25%;
        height: 20%;
        margin-top: 45px;
        margin-left: 30px;
        position: fixed;
    }

    .img1{
        width: 25%;
        height: 20%;
        margin-top: 130px;
        margin-left: 30px;
        position: fixed;

    }
</style>
